import React, {Component} from 'react';
import { AppRegistry, StyleSheet, Text, View, TextInput , Button} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Layout, Header, Body, Footer }  from '../../components/components.js';
import { i18n, LANG } from '../../config/config.js';

export default class Home extends Component {
  static navigationOptions = {
    title: '首页'
  };
 constructor(props) {
   super(props);
   this.state = {};
 }

 render() {
   const { navigate } = this.props.navigation;
   return (
     <Layout>
       <Body header="false">
         <Text>内容</Text>
           <Button
             onPress={() => navigate('singin')}
             title="登入"
           />
           <Button
             onPress={() => navigate('singup')}
             title="注册"
           />
           <Button
             onPress={() => navigate('forgetPassword')}
             title="忘记密码"
           />
           <Button
             onPress={() => navigate('home')}
             title="首页"
           />
       </Body>
       <Footer>
         <View style={styles.footerIcon}>
           <Text style={styles.icon}><Icon name="weixin" size={20} color="#ddd" /></Text>
           <Text style={styles.icon}>{i18n[LANG].app}</Text>
         </View>
         <View style={styles.footerIcon}>
           <Text style={styles.icon}><Icon name="address-book" size={20} color="#ddd" /></Text>
           <Text style={styles.icon}>{i18n[LANG].addressBook}</Text>
         </View>
         <View style={styles.footerIcon}>
           <Text style={styles.icon}><Icon name="compass" size={20} color="#ddd" /></Text>
           <Text style={styles.icon}>{i18n[LANG].find}</Text>
         </View>
         <View style={styles.footerIcon}>
           <Text style={styles.icon}><Icon name="user" size={20} color="#ddd" /></Text>
           <Text style={styles.icon}>{i18n[LANG].my}</Text>
         </View>
       </Footer>
     </Layout>
   );
 }
}

const styles = StyleSheet.create({
 footerIcon: {
   flex: 1,
   flexDirection: 'column',
   justifyContent: 'center',

 },
 icon: {
   textAlign: 'center',
   fontSize: 12,
   margin: 0,
   padding: 0,
   color: '#ddd'
 }
});
